<template>
  <div>
    <el-card>
      <span slot="header">商品添加</span>
      <el-form
        :model="form"
        label-width="80px"
        style="width: 400px"
        :rules="rules"
        ref="formRules"
      >  <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" clearable></el-input>
        </el-form-item>

      
        <el-form-item label="商品分类" prop="category">
          <el-select v-model="form.category" style="width: 100%">
            <el-option
              v-for="val in priceNameArr"
              :key="val"
              :label="val"
              :value="val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number
            v-model="form.price"
            :precision="2"
            :step="2"
            :min="0"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="商品图片" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述" prop="goodsDesc">
          <el-input
            type="textarea"
            v-model="form.goodsDesc"
            maxlength="50"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddGoodsHandle">添加商品</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {goods_Add,goodsCategories} from "@/api/goods"
export default {
  async created() {
        let res = await goodsCategories()
        this.priceNameArr = res.data
        // console.log(this.priceNameArr);
    },
  data() {
    return {
      priceNameArr: [],
      action:"http://sell.h5.itsource.cn:8087/goods/goods_img_upload",
      form: {
        name: "",
        category: "",
        price: 0,
        imgUrl: "",
        goodsDesc: "",
      },
               //验证规则
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        category: {
          required: true,
          message: "请选择商品分类",
          trigger: "change"
        },
        price: {
          required: true,
          message: "请输入商品价格",
          trigger: "blur"
        },
        imgUrl: {
          required: true,
          message: "请上传商品图片",
          trigger: "blur"
        },
        goodsDesc: {
          required: true,
          message: "请输入商品描述",
          trigger: "blur"
        }
      }
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
    },
    //图片上传成功
    handleAvatarSuccess(res) {
      console.log(res);
      this.form.imgUrl=res.imgUrl
    },
    //图片上传之前
    beforeAvatarUpload() {},
    //商品添加
      AddGoodsHandle(){
     this.$refs.formRules.validate(async valid=>{
      if (valid) {
        let res = await goods_Add(this.form)
        console.log(res);
        let {code,msg} = res.data
        
        if (code===0) {
          this.$router.push("/goods/goods-cate")
        }
      }
     })
    }
  },
};
</script>

<style lang="scss" scoped>
.goods-add {
  padding: 20px;
}
.el-button {
  background-color: #e3bc25;
  border: none;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #ccc;
}
.el-input-number {
  :deep(.el-input-number__increase) {
    height: 39px;
    line-height: 39px;
  }
  :deep(.el-input-number__decrease) {
    height: 39px;
    line-height: 39px;
  }
}
</style>
